<template>
  <div class="echarts-box">
    <div class="my-echarts" ref="temp_echarts">783489032my-echarts</div>
  </div>
</template>

<script>
import * as Echarts from 'echarts'

export default {
  name: 'BranchEcharts',
  data() {
    return {
      chart_instance: null,
      cut_page: 1,   // 当前页
      total_page: 0,   // 总页
      limit: 5,   // 每页的数据条数
      timer_id: null,   // 定时器
      all_data: [
        {name: '网点1', value: 66},
        {name: '网点2', value: 77},
        {name: '网点3', value: 88},
        {name: '网点4', value: 43},
        {name: '网点5', value: 56},
        {name: '网点6', value: 23},
        {name: '网点7', value: 56},
        {name: '网点8', value: 12},
        {name: '网点9', value: 34},
        {name: '网点10', value: 35},
        {name: '网点11', value: 99},
        {name: '网点12', value: 112},
        {name: '网点13', value: 58},
        {name: '网点14', value: 32},
        {name: '网点15', value: 49},
        {name: '网点16', value: 34},
        {name: '网点17', value: 78},
        {name: '网点18', value: 89},
        {name: '网点19', value: 67},
      ],
    }
  },
  mounted() {
    // console.log(Echarts);
    this.$nextTick(() => {
      
    })
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  destroyed() {
    clearInterval(this.timer_id)
    // 在组建销毁时, 销毁监听器
    window.removeEventListener('resize', this.screenAdapter)
  },
  
  methods: {
    // 初始化 initChart
    initChart() {
      this.chart_instance = Echarts.init( this.$refs['temp_echarts'], 'dark' )
      
      // 对图表初始化配置的控制
      const initOption = {
        title: {
          text: '▎整改问题逾期统计',
          textStyle: {
          },
          left: 20,
          top: 20,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            z: 0,
            lineStyle: {
              color: '#2D3443'
            }
          }
        },

        grid: {   // 配置整个直角坐标系的
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true,   // 距离是保函坐标轴上的文字的
        },
        xAxis: {   // 直角坐标x轴
          type: 'value',
        },
        yAxis: {   // 直角坐标y轴
          type: 'category',
        },
        series: [
          {
            type: 'bar',
            label: {
              show: true,   // 数值 文字的展示
              position: 'right',
              textStyle: {
                color: 'white',
              }
            },
            itemStyle: {
              // barBorderRadius: [0, 66/2, 66/2, 0],
              // color: 'red',
              
              // new 颜色渐变的一个 instance
              // 颜色渐变的方向
              // 指明不同颜色的 百分比
              color: new Echarts.graphic.LinearGradient(
                0,0,1,1,
                [
                  {
                    offset: 0,   // 0时的状态
                    color: '#5052EE',
                  },
                  {
                    offset: 1,   // 0时的状态
                    color: '#AB6EE5',
                  },
                ]
              )
            }
          }
        ]
      }

      this.chart_instance.setOption(initOption)

      this.chart_instance.on('mouseover', () => {
        clearInterval(this.timer_id)
      })
      this.chart_instance.on('mouseout', () => {
        this.startInterval()
      })
    },
    // 请求数据 getData
    getData() {
      this.all_data = this.all_data.sort((a,b) => {
        return a.value - b.value   // 从小到大的排序
      })
      this.total_page = this.all_data % this.limit == 0? this.all_data.length / this.limit : this.all_data.length / this.limit + 1

      this.updateChart()
      this.startInterval()
    },
    // 更新图表updateChart--->设置option,柱状图type为bar
    updateChart() {
      const show_data = this.all_data.slice((this.cut_page -1) * 5, this.cut_page * 5)
      // 类目轴所有的名称集合
      const cate_list = show_data.map( (item) => {
        return item.name
      })
      // 数值轴所有value集合
      const value_list = show_data.map( (item) => {
        return item.value
      })

      const dataOption = {
        yAxis: {   // 直角坐标y轴
          data: cate_list
        },
        series: [
          {
            data: value_list,
          }
        ],
      }
      this.chart_instance.setOption(dataOption)
    },
    // 开启定时器
    startInterval() {
      if(this.timer_id) clearInterval(this.timer_id)

      this.timer_id = setInterval(() => {
        if(this.cut_page++ > this.total_page) this.cut_page = 1
        this.cut_page++
        this.updateChart()
      }, 3200);
    },
    // 浏览器大小发生变化, 完成屏幕适配
    screenAdapter() {
      const title_fontsize = this.$refs['temp_echarts'].offsetWidth / 100 * 3.6
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: title_fontsize,
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: title_fontsize,
            }
          }
        },
        series: [
          {
            barWidth: title_fontsize,
            itemStyle: {
              barBorderRadius: [0, title_fontsize/2, title_fontsize/2, 0],
            }
          }
        ]
      }
      this.chart_instance.setOption(adapterOption)
      // 手动调用图表对象的resize 才能产生效果
      this.chart_instance.resize()
    },

  },
}
</script>


<style lang="scss">

</style>

<style lang="scss" scoped>

</style>